<template>
  <el-row >
    <el-col :span="12" justify="start" >
      <p style="font-size: 28px;cursor: pointer;" @click="router.push({ path: '/index' })">XXX管理系统</p>
    </el-col>
    <el-col :span="12" justify="end">
      <div class="show">
        <p>欢迎您：{{ information.username }}</p>
        <!--  Popover 气泡卡片  -->
        <el-popover trigger="click"
            popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
        >
          <template #reference>
            <el-avatar :size="40" src="" @error="errorHandler" >
              <img :src="information.avatar" />
            </el-avatar>
          </template>
          <template #default>
            <options v-bind="information" @getInformation="handlerGetInformation"/>
          </template>
        </el-popover>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
  import { onMounted, ref, reactive } from "vue";
  import cookies from '@/utils/cookies.js';
  import { ElMessage } from "element-plus";
  import { useRouter } from 'vue-router';
  import {getSingleUserInfo} from "@a/account";

  const router = useRouter();

  let information = reactive({
    id: 0,
    username: '',
    email: '',
    mobile: '',
    avatar: ''
  })

  const errorHandler = () => true

  // 查询用户信息
  const handlerGetInformation = () => {
    const userID = cookies.getCookie("id");
    getSingleUserInfo(userID)
        .then(response => {
          information.id = response.data.id;
          information.username = response.data.username
          information.email = response.data.email;
          information.mobile = response.data.mobile;
          information.avatar = response.data.avatar;
          // console.log('test-username:',username)
          // console.log('test-avatar:', avatar)
          console.log('test-information:', information.avatar)
        })
        .catch(error => {
          ElMessage.error('用户信息查询失败');
        })
  }

  onMounted(() => {
    handlerGetInformation()
  })
</script>
<style lang="less" scoped>

  .header .el-row, .header .el-col{
    line-height: 60px;
  }

  .header .el-avatar {
    margin-top: 10px;
  }
  .header .el-icon {
    margin-top: 20px;
  }

  .header .show {
    display: flex;
    justify-content: right;
    line-height: 60px;
  }
  .header p {
    font-size: 18px;
  }
  .header .show p, .header .show .el-avatar, .header .show .el-icon{
    margin-left: 10px;
  }
  //.el-container {
  //  :deep(.el-header) {
  //    --el-header-height: 160px;
  //  }
  //}
</style>